<template>
  <Form :model="formState" name="basic" layout="vertical" @finish="onSubmit()">
    <FormItem
      label="查询余票接口的压测数"
      name="travelServiceTps"
      :rules="[{ required: true, validator: checkTpsValidator }]"
    >
      <Row>
        <Col :span="12">
          <Slider
            v-model:value="travelServiceTps"
            :min="0"
            :max="200"
            :step="1"
          />
        </Col>
        <Col :span="4">
          <a-form-item-rest>
            <InputNumber
              v-model:value="travelServiceTps"
              :min="0"
              :max="200"
              style="margin-left: 16px"
            />
          </a-form-item-rest>
        </Col>
      </Row>
    </FormItem>
    <FormItem
      label="查询最便宜的票接口的压测数"
      name="travelPlanServiceTps"
      :rules="[
        {
          required: true,
          validator: checkTpsValidator,
        },
      ]"
    >
      <Row>
        <Col :span="12">
          <Slider
            v-model:value="travelPlanServiceTps"
            :min="0"
            :max="200"
            :step="1"
          />
        </Col>
        <Col :span="4">
          <a-form-item-rest>
            <InputNumber
              v-model:value="travelPlanServiceTps"
              :min="0"
              :max="200"
              :step="1"
              style="margin-left: 16px"
            />
          </a-form-item-rest>
        </Col>
      </Row>
    </FormItem>
    <FormItem :wrapper-col="{ offset: 6, span: 18 }">
      <Button html-type="submit" type="primary" v-if="isStressed" danger
        >停止压测</Button
      >
      <Button html-type="submit" type="primary" v-else>启动压测</Button>
    </FormItem>
  </Form>
</template>
<script lang="ts">
import { getTpsStatusApi, startTpsApi, stopTpsApi } from "@/api/tps";
import {
  Form,
  Row,
  Col,
  Slider,
  InputNumber,
  Button,
  notification,
} from "ant-design-vue";
import { Rule } from "ant-design-vue/es/form";
import { defineComponent, reactive, ref, toRefs, watch } from "vue";
import { useTpsModuleStore } from "@/store/tps"; //
export default defineComponent({
  components: {
    Form,
    FormItem: Form.Item,
    Row,
    Col,
    Slider,
    InputNumber,
    Button,
  },
  setup() {
    const formState = reactive<any>({
      travelServiceTps: 0,
      travelPlanServiceTps: 0,
    });
    const isStressed = ref<boolean|null>(null);
    const startTps = () => {
      startTpsApi(formState).then((res: any) => {
        if (res.code === "0") {
          isStressed.value = true
          notification["success"]({
            message: "启动压测成功",
          });
        } else {
          notification["error"]({
            message: "启动压测失败",
          });
        }
      }).catch(()=>{
        notification["error"]({
            message: "启动压测失败",
          });
      });
    };
    const stopTps = () => {
      stopTpsApi().then((res: any) => {
        if (res.code === "0") {
          notification["success"]({
            message: "停止压测成功",
          });
          isStressed.value = false
        } else {
          notification["error"]({
            message: "停止压测失败",
          });
        }
      }).catch(()=>{
        notification["error"]({
            message: "停止压测失败",
          });
      });
    };
    const checkTpsValidator = async (_rule: Rule, value: number) => {
      if (formState.travelServiceTps + formState.travelPlanServiceTps === 0) {
        return Promise.reject("压测次数不能全为0");
      }
      return Promise.resolve();
    };
    // 使用Pinia store
    const tpsModuleStore = useTpsModuleStore();
    formState.travelServiceTps = tpsModuleStore.tps.travelServiceTps;
    formState.travelPlanServiceTps = tpsModuleStore.tps.travelPlanServiceTps;
    isStressed.value = formState.isStressed;
    // 监听tps对象的变化
    watch(
      () => tpsModuleStore.tps,
      (newTps, oldTps) => {
        if(isStressed.value === undefined){
          isStressed.value = newTps.isStressed
          formState.travelServiceTps = newTps.travelServiceTps;
          formState.travelPlanServiceTps = newTps.travelPlanServiceTps;
        }else if(newTps.isStressed !== oldTps.isStressed && newTps.isStressed !== isStressed.value){
          if(newTps.isStressed){
            notification["info"]({
              message: "压测状态变化，远程端启动压测",
            });
          }else{
            notification["info"]({
              message: "压测状态变化，远程端已停止压测",
            });
          }
          isStressed.value = newTps.isStressed
          formState.travelServiceTps = newTps.travelServiceTps;
          formState.travelPlanServiceTps = newTps.travelPlanServiceTps;
        }
      }
    );
    return {
      formState,
      ...toRefs(formState),
      isStressed,
      checkTpsValidator,
      startTps,
      stopTps,
    };
  },
  methods: {
    onSubmit() {
      if (this.isStressed) {
        this.stopTps();
      } else {
        this.startTps();
      }
    },
  },
});
</script>
<style scoped>
.code-box-demo .ant-slider {
  margin-bottom: 16px;
}
</style>
